<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryParams" size="small" :inline="true"  label-width="68px">
      <el-form-item label="日期">
        <el-date-picker
        v-model="dateValue"
        type="daterange"
        range-separator="-"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row style="margin-top: 10px;" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['business:dishes:add']"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['com/ruoyi/business:dishes:remove']"
        >删除</el-button>
      </el-col> -->
    </el-row>
    <!-- 列表 -->
    <el-table border stripe :header-cell-style="rowClass" v-loading="loading" :data="dishesList" style="width: 100%">
    <el-table-column :resizable="false" show-overflow-tooltip align="center" prop="date" label="日期"/>
    <el-table-column :resizable="false" show-overflow-tooltip align="center" prop="dayOfWeek" label="星期" />
    <el-table-column :resizable="false" show-overflow-tooltip align="center" prop="breakfastDishes" label="早餐" />
      <el-table-column show-overflow-tooltip align="center"  label="早餐用餐时间" >
        <template slot-scope="scope">
          {{ scope.row.breakfastStartTime }} - {{ scope.row.breakfastEndTime }}
        </template>
      </el-table-column>
    <el-table-column :resizable="false" show-overflow-tooltip align="center" prop="lunchDishes" label="午餐" />
      <el-table-column show-overflow-tooltip align="center"  label="午餐用餐时间" >
        <template slot-scope="scope">
          {{ scope.row.lunchStartTime }} - {{ scope.row.lunchEndTime }}
        </template>
      </el-table-column>
    <el-table-column :resizable="false" show-overflow-tooltip align="center" prop="dinnerDishes" label="晚餐" />
      <el-table-column show-overflow-tooltip align="center"  label="晚餐用餐时间" >
        <template slot-scope="scope">
          {{ scope.row.dinnerStartTime }} - {{ scope.row.dinnerEndTime }}
        </template>
      </el-table-column>
    <el-table-column :resizable="false" align="center" label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 编辑 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="日期" prop="date" >
          <el-date-picker
            :disabled="disabled"
            v-model="form.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="早餐用餐时间" prop="ztime">
          <el-time-picker
            is-range
            v-model="form.ztime"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="HH:mm:ss"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="早餐菜品" prop="dishes0">
          <el-select v-model="form.dishes0" multiple placeholder="请选择">
            <el-option
              v-for="item in dishes"
              :key="item.value"
              :label="item.dishName"
              :value="item.dishId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="午餐用餐时间" prop="wtime">
          <el-time-picker
            is-range
            v-model="form.wtime"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="HH:mm:ss"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="午餐菜品" prop="dishes1">
          <el-select v-model="form.dishes1" multiple placeholder="请选择">
            <el-option
              v-for="item in dishes"
              :key="item.value"
              :label="item.dishName"
              :value="item.dishId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="晚餐用餐时间" prop="Wtime">
          <el-time-picker
            is-range
            v-model="form.Wtime"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="HH:mm:ss"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="晚餐菜品" prop="dishes2">
          <el-select v-model="form.dishes2" multiple placeholder="请选择">
            <el-option
              v-for="item in dishes"
              :key="item.value"
              :label="item.dishName"
              :value="item.dishId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getListData, addMenu, updateMenu, getOneData, removeMenu } from "@/api/menuSystem/menuList";
import { listDishes } from "@/api/menuSystem/menuName";
export default {
    data() {
      return {
        //输入框禁用
        disabled:null,
        //菜品
        dishes: [],
        // 遮罩层
        loading: true,
        //查询日期
        dateValue:null,
        //显示标题
        title:"",
        //菜单列表
        dishesList:[],
        //是否显示弹出层
        open:false,
        //查询参数
        queryParams:{
          startDate:null,
          endDate:null,
        },
        //表单
        form:{},
        //表单校验
        rules:{
          date:[
          { required: true, message: "日期不能为空", trigger: "blur" }
          ],
          // ztime:[
          // { required: true, message: "早餐时间不能为空", trigger: "blur" }
          // ],
          // wtime:[
          // { required: true, message: "午餐时间不能为空", trigger: "blur" }
          // ],
          // Wtime:[
          // { required: true, message: "晚餐不能为空", trigger: "blur" }
          // ],
          // dishes0:[
          // { required: true, message: "早餐菜品不能为空", trigger: "blur" }
          // ],
          // dishes1:[
          // { required: true, message: "午餐菜品不能为空", trigger: "blur" }
          // ],
          // dishes2:[
          // { required: true, message: "晚餐菜品不能为空", trigger: "blur" }
          // ],
        },
      }
    },
    created() {
      this.getList();
      this.getListDishes()
    },
    methods: {
      //获取菜品
      getListDishes(){
        listDishes().then(res=>{
          res.rows.forEach(item => {
            this.dishes.push(item)
          });
        })
      },
      // 获取列表
      getList(){
        this.loading = true;
        if(this.dateValue!=null){
          this.queryParams.startDate=this.dateValue[0]
          this.queryParams.endDate=this.dateValue[1]
        }
        getListData(this.queryParams).then(res=>{
          this.dishesList=res.rows
          this.loading = false;
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.startDate=null
        this.queryParams.endDate=null
        this.dateValue=null
        this.handleQuery();
      },
      //选择查询日期的区间
      dateChange(e){
        this.queryParams.dateTime=e
        this.getList()
      },
      //添加按钮
      handleAdd(){
        this.reset()
        this.open=true
        this.title="添加菜单"
      },
      //修改按钮
      handleUpdate(row){
        this.reset();
        this.queryParams.specificDate=row.date
        getOneData(this.queryParams).then(response => {
          this.disabled=true
          let data={
            date:response.data.date,
            ztime:[response.data.breakfastStartTime,response.data.breakfastEndTime],
            wtime:[response.data.lunchStartTime,response.data.lunchEndTime],
            Wtime:[response.data.dinnerStartTime,response.data.dinnerEndTime],
            dishes0:response.data.breakfastDishIds.map(item=>item),
            dishes1:response.data.lunchDishIds.map(item=>item),
            dishes2:response.data.dinnerDishIds.map(item=>item)
          }
          this.form = data;
          this.open = true;
          this.title = "修改菜单信息";
        });
      },
      //表单重置
      reset(){
        this.form={
          date:null,
          ztime:null,
          wtime:null,
          Wtime:null,
          dishes0:null,
          dishes1:null,
          dishes2:null
        }
        this.disabled=false
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
              this.form.startTime0=this.form.ztime['0']
              this.form.endTime0=this.form.ztime['1']
              this.form.startTime1=this.form.wtime['0']
              this.form.endTime1=this.form.wtime['1']
              this.form.startTime2=this.form.Wtime['0']
              this.form.endTime2=this.form.Wtime['1']
            if(!this.disabled){
              addMenu(this.form).then(response => {
                this.$modal.msgSuccess("添加成功");
                this.open = false;
                this.getList();
              });
            }else{
              updateMenu(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
            }
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      //删除
      handleDelete(row) {
        const specificDate=row.date
        let obj={
          specificDate:row.date
        }
      this.$modal.confirm('是否确认删除存储菜单的基本信息日期为"' + specificDate + '"的数据项？').then(function() {
        return removeMenu(obj);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    }
  }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

